<template>
    <script ref="ueditor" name="content" type="text/plain">
    </script>
</template>
<script>
import Vue from 'vue';
import hub from 'common/hub';
import {
    loadJS,
    cookie
} from 'common/util';
export default {
    props: {
        value: {
            type: String,
            default: ''
        },
        config: {
            type: Object,
            default() {
                return {
                    initialFrameWidth: '100%',
                    initialFrameHeight: 400
                };
            }
        }
    },
    mounted() {
        this.initUeditor();
    },
    methods: {
        init() {
            this.initUeditor();
        },
        initUeditor() {
            let p1 = new Promise((resolve, reject) => {
                loadJS('/asset/ueditor/ueditor.config.js', resolve);
            });
            let p2 = new Promise((resolve, reject) => {
                loadJS('/asset/ueditor/ueditor.all.js', resolve);
            });
            Promise.all([p1, p2]).then(vals => {
                let id = new Date().getTime().toString();
                this.$refs.ueditor.id = id;
                this.editor = UE.getEditor(id, this.config);
                this.editor.ready(function() {
                    this.editor.setContent(this.value);
                    this.editor.addListener('contentChange', function() {
                        this.$emit('input', this.editor.getContent());
                    }.bind(this));
                    this.editor.addListener('blur', function() {
                        this.$emit('input', this.editor.getContent());
                    }.bind(this));
                    this.$emit('ready', this.editor);
                }.bind(this));
            });
        }
    }
}
</script>
<style lang="less">
.edui-default .edui-editor {
    box-sizing: border-box;
    line-height: normal;
}

</style>
